﻿@page "/utilities/color"
<Pager Title="颜色" Description="通用参数，包括背景颜色(BgColor)，文本颜色(TextColor)">
	
	<Demo Title="背景颜色">
		<Run>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Primary).TextColor(TextColor.Light)">Primary</Element>
			<Element Margin="Margin.Is2.FromBottom" Padding="Padding.Is2" CssClass="Css.BgColor(BgColor.Secondary).TextColor(TextColor.Light)">Secondary</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Info).TextColor(TextColor.Light)">Info</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Warning).TextColor(TextColor.Dark)">Warning</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Success).TextColor(TextColor.Light)">Success</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Danger).TextColor(TextColor.Light)">Danger</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Light).TextColor(TextColor.Dark)">Light</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Dark).TextColor(TextColor.Light)">Dark</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Transparent).TextColor(TextColor.Dark)">Transparent</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Body).TextColor(TextColor.Light)">Body</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.White).TextColor(TextColor.Dark)">White</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element CssClass=""Css.BgColor(BgColor.Primary)"">Primary</Element>
<Element CssClass=""Css.BgColor(BgColor.Secondary)"">Secondary</Element>
<Element CssClass=""Css.BgColor(BgColor.Info)"">Info</Element>
<Element CssClass=""Css.BgColor(BgColor.Warning)"">Warning</Element>
<Element CssClass=""Css.BgColor(BgColor.Success)"">Success</Element>
<Element CssClass=""Css.BgColor(BgColor.Danger)"">Danger</Element>
<Element CssClass=""Css.BgColor(BgColor.Light)"">Light</Element>
<Element CssClass=""Css.BgColor(BgColor.Dark))"">Dark</Element>
<Element CssClass=""Css.BgColor(BgColor.Transparent)"">Transparent</Element>
<Element CssClass=""Css.BgColor(BgColor.Body)"">Body</Element>
<Element CssClass=""Css.BgColor(BgColor.White)"">White</Element>
```
")
		</Code>
	</Demo>
	<Demo Title="背景渐变">
		<Description>
			设置 <code>BgColor(color, true)</code> 第二个参数为 <code>true</code> 即可。
		</Description>
		<Run>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Primary,true).TextColor(TextColor.Light)">Primary</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Secondary,true).TextColor(TextColor.Light)">Secondary</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Info,true).TextColor(TextColor.Light)">Info</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Warning,true).TextColor(TextColor.Dark)">Warning</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Success,true).TextColor(TextColor.Light)">Success</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Danger,true).TextColor(TextColor.Light)">Danger</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Light,true).TextColor(TextColor.Dark)">Light</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Dark,true).TextColor(TextColor.Light)">Dark</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Transparent,true).TextColor(TextColor.Dark)">Transparent</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.Body,true).TextColor(TextColor.Light)">Body</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).Padding(SpaceNum.Two2).BgColor(BgColor.White,true).TextColor(TextColor.Dark)">White</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element CssClass=""Css.BgColor(BgColor.Primary,true)"">Primary</Element>
<Element CssClass=""Css.BgColor(BgColor.Secondary,true)"">Secondary</Element>
<Element CssClass=""Css.BgColor(BgColor.Info,true)"">Info</Element>
<Element CssClass=""Css.BgColor(BgColor.Warning,true)"">Warning</Element>
<Element CssClass=""Css.BgColor(BgColor.Success,true)"">Success</Element>
<Element CssClass=""Css.BgColor(BgColor.Danger,true)"">Danger</Element>
<Element CssClass=""Css.BgColor(BgColor.Light,true)"">Light</Element>
<Element CssClass=""Css.BgColor(BgColor.Dark,true)"">Dark</Element>
<Element CssClass=""Css.BgColor(BgColor.Transparent,true)"">Transparent</Element>
<Element CssClass=""Css.BgColor(BgColor.Body,true)"">Body</Element>
<Element CssClass=""Css.BgColor(BgColor.White,true)"">White</Element>
```
")
		</Code>
	</Demo>
	<Demo Title="文本颜色">
		<Run>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Primary)">Primary</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Secondary)">Secondary</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Info).BgColor(BgColor.Dark)">Info</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Warning)">Warning</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Success)">Success</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Danger)">Danger</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Muted)">Muted</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Dark)">Dark</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Black50)">Black 50</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.Body)">Body</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.White).BgColor(BgColor.Dark)">White</Element>
			<Element CssClass="Css.Margin(SpaceNum.Two2, SpaceSide.Bottom).TextColor(TextColor.White50).BgColor(BgColor.Dark)">White 50</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element CssClass=""Css.TextColor(TextColor.Primary)"">Primary</Element>
<Element CssClass=""Css.TextColor(TextColor.Secondary)"">Secondary</Element>
<Element CssClass=""Css.TextColor(TextColor.Info)"">Info</Element>
<Element CssClass=""Css.TextColor(TextColor.Warning)"">Warning</Element>
<Element CssClass=""Css.TextColor(TextColor.Success)"">Success</Element>
<Element CssClass=""Css.TextColor(TextColor.Danger)"">Danger</Element>
<Element CssClass=""Css.TextColor(TextColor.Muted)"">Muted</Element>
<Element CssClass=""Css.TextColor(TextColor.Dark)"">Dark</Element>
<Element CssClass=""Css.TextColor(TextColor.Black50)"">Black 50</Element>
<Element CssClass=""Css.TextColor(TextColor.Body)"">Body</Element>
<Element CssClass=""Css.TextColor(TextColor.White)"">White</Element>
<Element CssClass=""Css.TextColor(TextColor.White50)"">White 50</Element>
```
")
		</Code>
	</Demo>
</Pager>